<template>
  <div class="editPersona">
    <EvNavbar title="个人信息编辑">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #right>
        <van-icon
          name="wap-home-o"
          size="20"
          color="red"
          @click="$router.push({ name: 'index' })"
        />
      </template>
    </EvNavbar>

    <!-- 图片展示和上传区域 -->
    <div class="userImg">
      <img :src="userinfo.head_img" />
      <van-uploader :after-read="afterRead" />
    </div>

    <!-- 信息展示及编辑区域 -->
    <!-- 编辑昵称 -->
    <EvCell
      title="昵称"
      :desc="userinfo.nickname"
      @click.native="
        nickshow = true;
        nickname = userinfo.nickname;
      "
    ></EvCell>
    <van-dialog
      v-model="nickshow"
      title="编辑昵称"
      show-cancel-button
      @confirm="updateNickname"
    >
      <van-field
        v-model.trim="nickname"
        label="昵称"
        placeholder="请输入昵称"
      />
    </van-dialog>

    <!-- 编辑密码 -->
    <EvCell
      title="密码"
      desc="******"
      @click.native="
        passshow = true;
        originPass = newPass = '';
      "
    ></EvCell>
    <van-dialog
      v-model="passshow"
      title="编辑密码"
      show-cancel-button
      @confirm="updatePassword"
      :before-close="beforeClose"
    >
      <van-field
        label="原密码"
        placeholder="请输入原密码"
        v-model="originPass"
      />
      <van-field label="新密码" placeholder="请输入新密码" v-model="newPass" />
    </van-dialog>
    <EvCell title="性别" :desc="userinfo.gender === 1 ? '男' : '女'"></EvCell>
  </div>
</template>

<script>
import EvNavbar from "@/components/ev-navbar.vue";
import EvCell from "@/components/ev-cell.vue";
import { getUserInfo, updateUser } from "@/apis/user.js";
import { uploadFile } from "@/apis/fileUpload.js";
import axios from "@/utils/request.js";
export default {
  data() {
    return {
      userinfo: {},
      // 编辑昵称模态框是否可见
      nickshow: false,
      // 用户昵称
      nickname: "",
      // 用户密码
      passshow: false,
      // 原密码
      originPass: "",
      // 新密码
      newPass: "",
    };
  },
  components: {
    EvNavbar,
    EvCell,
  },
  async mounted() {
    const id = this.$route.params.id;
    const res = await getUserInfo(id);
    this.userinfo = res.data.data;
    this.userinfo.head_img = this.userinfo.head_img
      ? axios.defaults.baseURL + this.userinfo.head_img
      : "http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg";
  },

  // 文件上传
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // 手机文件数据
      let formdata = new FormData();
      formdata.append("file", file.file);
      // 上传文件
      const res = await uploadFile(formdata);
      // 为img赋值--刷新;所谓刷新页面展示就是将元素所绑定的数据更新--数据驱动视图
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url;

      // 实现用户头像的编辑
      // 数据库中存储的 是相对路径（并不包含基准路径）
      const id = this.$route.params.id;
      const url = res.data.data.url;
      const str = await updateUser(id, { head_img: url });
      console.log(str);
      if (str.data.message === "修改成功") {
        this.$toast.success("修改成功");
      }
    },

    // 编辑昵称
    async updateNickname() {
      if (this.nickname.length === 0) {
        this.$toast.fail("请输入昵称");
        return;
      }
      const id = this.$route.params.id;
      const res = await updateUser(id, { nickname: this.nickname });
      console.log(res);
      if (res.data.message === "修改成功") {
        this.$toast.success("修改成功");
        // 刷新页面展示
        this.userinfo.nickname = this.nickname;
      }
    },
    // 编辑密码
    async updatePassword() {
      // const id = this.$route.params.id;
      // const res = await updateUser(id, { nickname: this.nickname });
      // console.log(res);
      if (this.originPass === this.userinfo.password) {
        // 原密码否输入正确
        if (/^.{3,16}$/.test(this.newPass)) {
          // 新密码是否合法
          const id = this.$route.params.id;
          const res = await updateUser(id, { password: this.newPass });
          console.log(res);
          if (res.data.message === "修改成功") {
            this.$toast.success(res.data.message);
            // 为了第二次修改密码时验证逻辑的正确，我们得更新userinfo.password
            this.userinfo.password = this.newPass;
          }
        } else {
          this.$toast.fail("请输入3-16位的新密码");
        }
      } else {
        this.$toast.fail("请输入正确的原密码");
      }
    },

    // 阻止模态框的关闭-增加用户体验
    // action:当前用户的操作类型：   确认 、 取消
    // done一定要确保调用，否则模态框不能关闭
    beforeClose(action, done) {
      // 如果用户单击是确认才需要进行体验的处理
      if (action === "confirm") {
        // 当原密码输入 不正确，或者  新密码输入不合法的时候才阻止关闭
        if (this.originPass.length === 0 || this.newPass.length === 0) {
          this.$toast.fail("不能为空");
        } else {
          if (
            this.originPass !== this.userinfo.password ||
            !/^.{3,16}$/.test(this.newPass)
          ) {
            // 阻止模态框的关闭
            done(false);
          } else {
            // 输入没问题，则关模态框
            done();
          }
        }
      } else {
        done();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.userImg {
  padding: 20px 0;
  text-align: center;
  position: relative;
  img {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  // 添加深度作用选择器
  /deep/ .van-uploader__upload {
    width: 100px;
    height: 100px;
  }
  /deep/ .van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
</style>